<template>
    <div class="login-wrap">
        <div class="ms-login">
            <form :model="ruleForm"  ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <x-input v-model="ruleForm.username" placeholder="username"></x-input>
                <x-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></x-input>
                <div class="login-btn">
                    <div v-on:click="submitForm('ruleForm')">
                        <span>登录</span>
                    </div>
                </div>
                <p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码。</p>
            </form>
        </div>
         <toast v-model="toastShow" type='warn'>请填写完整</toast>
         <toast v-model="LoginError" type="warn" width="12em">账户密码错误，请重试</toast>
    </div>
</template>
<script>
import { setToken } from '../utils/auth'
import { XInput, XButton ,Toast} from 'vux'
export default {
    components: {
        XInput,
        XButton,
        Toast
    },
    data: function() {
        return {
            ruleForm: {
                username: '',
                password: ''
            },
            toastShow:false,
            LoginError:false,
            errMsg: ''
        }
    },
    methods: {
        submitForm: function(formName) {
            const self = this
            if (self.ruleForm.username == '' || self.ruleForm.password == '') {
                self.toastShow=true;
                return false
            } else {

                var formData = { username: self.ruleForm.username, password: self.ruleForm.password }

                self.$ajax.post('../login', formData)
                    .then((res) => {
                        self.$router.push('/home')
                        localStorage.setItem('ms_staffId', res.data.username)
                        setToken(res.data.authorization)
                    }).catch((err) => {
                        self.LoginError=true
                        //Network Error
                        console.log('err', err)
                    })
            }
        }
    },
    mounted: function() {},
    created: function() {

    }
}

</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.ms-title {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -230px;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 160px;
    margin: -150px 0 0 -190px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
}

.login-btn {
    padding: 4px;
    text-align: center;
    background-color: green;
    width: 200px;
    margin-left: 48px;
    color: white;
}

</style>
